<template>
  <div class="full-page map-container">
    <div class="demo">
      <ul>
        <li v-for="(item,i) in demoList"
            :key="i"
            :class="i === activeOperate ? 'active':''"
            @click="handleTabClick()">
          {{ item.title }}
        </li>
      </ul>
    </div>
    <div class="map-wrapper">
      <router-view />
    </div>
  </div>
</template>

<script setup>
const activeOperate = ref(0)
const router = useRouter()

const demoList = [
  { path: '/baseMap', title: '切换底图' },
  { fileName: 'flyTo', title: '平滑移动' },
  { fileName: 'setView', title: '视图聚焦' },
  { fileName: 'addMarkers', title: '添加标记' },
  { fileName: 'addPoints', title: '添加点' },
  { fileName: 'addPolyLine', title: '添加线' },
  { fileName: 'addPolygon', title: '添加面' },
  { fileName: 'addBoxes', title: '添加立方体' },
  { fileName: 'addLabels', title: '添加标签' },
  { fileName: 'addPopup', title: '添加弹窗' },
  { fileName: 'addModel', title: '添加模型' }
]

// 初始化
function handleTabClick () {
  router.push(demoList[activeOperate.value].path)
}

</script>

<style lang='less' scoped>
.map-container {
  display: flex;
  .demo {
     border-right: 1px solid #f3f3f3;
    & > ul {
      margin: 0;
      padding: 0;
      text-align: center;
      line-height: 1.5;
      & > li {
        padding: 4px 2px;
        font-size: 12px;
        cursor: pointer;
         border-bottom: 1px solid #f3f3f3;
        // &:not(:first-child) {
        //   border-top: 1px solid #f3f3f3;
        // }
        &.active,
        &:hover {
          color: orange;
        }
      }
    }
  }
  .map-wrapper {
    position: relative;
    flex: 1;
  }
}

</style>
